<template>
  <div>
    <div class="f ac pb10">
      <div class="nowrap mr5 b">类型：</div>
      <div class="g1aada7 rds2 pl5 pr5 pt2 pb2" style="border:1px solid #1aada7;">下拉</div>
    </div>
    <div class="pt10 pb10">
      <div class="nowrap mr5 b">标题：</div>
      <Input :value="item.label" @on-change="e=>changeField(e, 'label')" />
    </div>
    <div class=" pt10 pb10">
      <div class="nowrap mr5 b">字段标识1：</div>
      <Input :value="item.key1" @on-change="e=>changeField(e, 'key1')" />
    </div>
    <div class=" pt10 pb10">
      <div class="nowrap mr5 b">字段标识2：</div>
      <Input :value="item.key2" @on-change="e=>changeField(e, 'key2')" />
    </div>
    <div class="pt10 pb10">
      <div class="nowrap mr5 b">标签宽度：</div>
      <Input :value="item.labelWidth" @on-change="e=>changeField(e, 'labelWidth')" v-int v-min="0" v-max="10000" />
      <!-- <InputNumber :min="50" :max="10000" :step="1" :value="item.labelWidth" style="width:100%;" @on-change="e=>changeField(e, 'labelWidth')"></InputNumber> -->
    </div>
    <div class="pt10 pb10">
      <div class="nowrap mr5 b">选项：</div>
      <div class="f fs12">
        <div @click="dataSource=0" :class="['pl10 pr10 pt5 pb5 f ac xc poi', dataSource == 0 ? 'bg1aada7 gf bd1aada7' : 'bdc']" style="border-radius:3px 0 0 3px;">静态数据</div>
        <div @click="dataSource=1" :class="['pl10 pr10 pt5 pb5 f ac xc poi', dataSource == 1 ? 'bg1aada7 gf bd1aada7' : 'bdc']" style="border-radius:0 3px 3px 0;">动态数据</div>
      </div>
      <div v-if="dataSource==0" class="pl5 pt10">
        <VabDraggable v-bind="dragOptions" :list="item.options" @change="changeDrag">
          <div v-for="curOpt in item.options" :key="curOpt.id">
            <div class="f ac mb5 poi">
              <div @click="selectItem(curOpt)" :class="['rds50 f ac xc mr5 trans3']" :style="{width:'16px',height:'16px',border: curOpt.isChecked ? '1px solid #1aada7' : '1px solid #dcdee2'}">
                <div v-show="curOpt.isChecked" class="rds50" style="transform:translateX(0.2px);width:10px;height:10px;background:#1aada7;"></div>
              </div>
              <Input :value="curOpt.name" @on-change="e => changeOptions(e, curOpt)" placeholder="请输入" style="width: 140px" size="small" />
              <svg t="1691549323914" class="ml5" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1492" width="20" height="20"><path d="M133.310936 296.552327l757.206115 0c19.781623 0 35.950949-16.169326 35.950949-35.950949 0-19.781623-15.997312-35.950949-35.950949-35.950949L133.310936 224.650428c-19.781623 0-35.950949 16.169326-35.950949 35.950949C97.359987 280.383 113.529313 296.552327 133.310936 296.552327z" fill="#575B66" p-id="1493"></path><path d="M890.51705 476.135058 133.310936 476.135058c-19.781623 0-35.950949 16.169326-35.950949 35.950949 0 19.781623 16.169326 35.950949 35.950949 35.950949l757.206115 0c19.781623 0 35.950949-16.169326 35.950949-35.950949C926.467999 492.304384 910.298673 476.135058 890.51705 476.135058z" fill="#575B66" p-id="1494"></path><path d="M890.51705 727.447673 133.310936 727.447673c-19.781623 0-35.950949 15.997312-35.950949 35.950949s16.169326 35.950949 35.950949 35.950949l757.206115 0c19.781623 0 35.950949-15.997312 35.950949-35.950949S910.298673 727.447673 890.51705 727.447673z" fill="#575B66" p-id="1495"></path></svg>
              <svg @click="delItem(curOpt)" t="1691549378623" class="ml5" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2516" width="20" height="20"><path d="M736 352.032L736.096 800h-0.128L288 799.968 288.032 352 736 352.032zM384 224h256v64h-256V224z m448 64h-128V202.624C704 182.048 687.232 160 640.16 160h-256.32C336.768 160 320 182.048 320 202.624V288H192a32 32 0 1 0 0 64h32V799.968C224 835.296 252.704 864 288.032 864h447.936A64.064 64.064 0 0 0 800 799.968V352h32a32 32 0 1 0 0-64z" fill="#4C4B4C" p-id="2517"></path><path d="M608 690.56a32 32 0 0 0 32-32V448a32 32 0 1 0-64 0v210.56a32 32 0 0 0 32 32M416 690.56a32 32 0 0 0 32-32V448a32 32 0 1 0-64 0v210.56a32 32 0 0 0 32 32" fill="#4C4B4C" p-id="2518"></path></svg>
              <svg @click="showLink(curOpt)" t="1691719236721" class="ml5" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1815" id="mx_n_1691719236722" width="18" height="18"><path d="M686.3 630.3V513.2c0-19.9-16.1-36-36-36s-36 16.1-36 36v101.1H136.7V136.7h477.6v98.8c0 19.9 16.1 36 36 36s36-16.1 36-36V120.7c0-30.9-25.1-56-56-56H120.7c-30.9 0-56 25.1-56 56v509.6c0 30.9 25.1 56 56 56h509.6c30.9 0 56-25.1 56-56z" fill="#575B66" p-id="1816"></path><path d="M903.8 337.8H394.2c-30.9 0-56 25.1-56 56v118c0 19.9 16.1 36 36 36s36-16.1 36-36v-102h477.6v477.6H410.2V784.6c0-19.9-16.1-36-36-36s-36 16.1-36 36v118.7c0 30.9 25.1 56 56 56h509.6c30.9 0 56-25.1 56-56V393.8c0-30.9-25.1-56-56-56z" fill="#575B66" p-id="1817"></path></svg>
              <svg @click="showInput(curOpt)" t="1691997631032" class="ml5" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7486" width="18" height="18"><path d="M863.898914 438.098143c-18.405996 0-31.992992 14.926996-31.992992 33.314992v407.5209c0 43.811989-33.926992 81.06198-77.725981 81.061981H158.885086c-43.794989 0-94.747977-37.249991-94.747977-81.061981V282.588181c0-43.849989 50.952988-90.596978 94.747977-90.596978H499.160003c18.399996 0 33.275992-13.596997 33.275992-32.001992 0-18.405996-14.874996-32.000992-33.275992-32.000992H158.886086C71.380108 127.988219 0.151125 194.880202 0.151125 282.590181v596.344854C0.150125 966.627014 71.378108 1024 158.886086 1024h595.295855c87.536979 0 141.709965-57.372986 141.709965-145.064965V471.413135c0-18.387996-13.590997-33.314992-31.992992-33.314992zM995.049882 76.676231l-48.736988-48.809988c-37.085991-37.154991-102.252975-37.154991-139.329966 0l-92.096978 108.284974L224.08707 606.090102v11.469997l-0.365 1.963-61.739985 209.317949 45.331989 40.46599 198.033952-69.841983 2.497999 0.525h9.716998L886.889908 308.506175l108.158974-88.340979c38.398991-38.460991 38.398991-104.999974 0-143.489965zM249.175064 782.868059l28.832993-91.841978 57.604986 57.682986-86.437979 34.158992z m145.020965-68.502983l-84.78598-84.90198 438.772893-436.598893 82.06998 82.20298-436.056893 439.297893zM948.629893 169.697209l-65.389984 65.432984-95.190976-95.337977 65.354984-65.429984c6.181998-6.173998 14.405996-9.557998 23.239994-9.557998 8.812998 0 17.052996 3.383999 23.213994 9.558998l48.702988 48.796988c12.845997 12.847997 12.845997 33.719992 0.069 46.536989z" :fill="curOpt.isNeedOther ? '#1adaa7' : '#575B66'" p-id="7487"></path></svg>
            </div>
            <div v-if="curOpt.isShowLink" class="pl20 mb10">
              <div class="f ac ">
                <div class="mr10">关联字段</div>
                <div class="f ac" @click="changeOptType(curOpt, 1)">
                  <div :class="['rds50 f ac xc mr5 trans3 poi']" :style="{width:'16px',height:'16px',border: curOpt.type == 1 ? '1px solid #1aada7' : '1px solid #dcdee2'}">
                    <div v-show="curOpt.type == 1" class="rds50" style="transform:translateX(0.2px);width:10px;height:10px;background:#1aada7;"></div>
                  </div>禁用
                </div>
                <div class="f ac" @click="changeOptType(curOpt, 2)">
                  <div :class="['ml20 rds50 f ac xc mr5 trans3 poi']" :style="{width:'16px',height:'16px',border: curOpt.type == 2 ? '1px solid #1aada7' : '1px solid #dcdee2'}">
                    <div v-show="curOpt.type == 2" class="rds50" style="transform:translateX(0.2px);width:10px;height:10px;background:#1aada7;"></div>
                  </div>启用
                </div>
              </div>
              <Input :value="curOpt.link" @on-change="e => changeLink(e, curOpt)" size="small"/>
            </div>
          </div>
        </VabDraggable>
        <div class="f ac pl30">
          <div @click="addOptions" class="g1aada7 poi hoverText">新增选项</div>
          <div @click="resetSelect" class="ml15 g1aada7 poi hoverText">重置选择</div>
        </div>
      </div>
      <div v-if="dataSource==1">
        <div class="f ac pl5 pt10">
          <div class="">请求地址：</div>
          <Input :value="item.optionsUrl" @on-change="e=>changeField(e, 'optionsUrl')" placeholder="/admin-api/diag/xxx" class="f1" style=""/>
        </div>
      </div>
      <!-- <div class="f fs12 tc rel bdbe">
        <div @click="dataSource = 0" class="poi pt10 pb10 " :style="{ color: dataSource == 0 ? '' : '', width:'100px' }">静态数据</div>
        <div @click="dataSource = 1" class="poi pt10 pb10" :style="{ color: dataSource == 1 ? '#1AADA7' : '', width:'100px'}">动态数据</div>
        <div class="abs b0 trans3" :style="{ backgroundColor: '#1AADA7', width: '148px', height: '2px', transform: `translateX(${150 * dataSource}px)` }"></div>
      </div> -->
    </div>
    <div class="pt10 pb10">
      <div class="nowrap mr5 b">操作属性：</div>
      <div class="f rw">
        <div @click="checkOperate(optItem)" v-for="optItem in operateList" :key="optItem.id" class="f ac mr30  poi">
          <div class="rds2 rel trans3 f ac xc mr5" :style="{width:'16px',height:'16px',background: optItem.isChecked ? '#1aada7' : '#fff', border: optItem.isChecked ? 'none' : '1px solid #dcdee2'}">
            <div v-show="optItem.isChecked" style="width:10px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:translate(0, -1px) rotate(-45deg);"></div>
          </div>
          {{optItem.name}}
        </div>
      </div>
    </div>
    <div class="pt10 pb10">
      <div class="nowrap mr5 b">校验：</div>
      <div class="">
        <div v-for="optItem in checkList" :key="optItem.id" >
          <div @click="selectCheck(optItem)" class="f ac poi">
            <div class="rds2 rel trans3 f ac xc mr5" :style="{width:'16px',height:'16px',background: optItem.isChecked ? '#1aada7' : '#fff', border: optItem.isChecked ? 'none' : '1px solid #dcdee2'}">
              <div v-show="optItem.isChecked" style="width:10px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:translate(0, -1px) rotate(-45deg);"></div>
            </div>
            {{optItem.name}}
          </div>
          <div v-if="optItem.id == 2 && optItem.isChecked" class="mb5">
            <Input :value="item.regExp" @on-change="e=>changeField(e, 'regExp')" />
          </div>
          <div v-if="optItem.id == 3 && optItem.isChecked" class="mb5">
            <Input :value="item.validator" @on-change="e=>changeField(e, 'validator')" />
          </div>
        </div>
      </div>
    </div>
    <div class="pt10 pb10">
      <div class="nowrap mr5 b">事件动作</div>
      <div class="">
        <div>onChange事件</div>
        <Input type="textarea" :autosize="{ minRows: 4 }" class="" :value="item.onChange" @on-change="e=>changeField(e, 'onChange')" />
      </div>
      <!-- <div class="">
        <div>onFocus事件</div>
        <Input class="" :value="item.onFocus" @on-change="e=>changeField(e, 'onFocus')" />
      </div>
      <div class="">
        <div>onBlur事件</div>
        <Input class="" :value="item.onBlur" @on-change="e=>changeField(e, 'onBlur')" />
      </div> -->
    </div>
  </div>
</template>
<script src='./index.js'></script>
<style src='./index.css' scoped>
</style>